<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Fabric with history</title>
</head>
<body>
  <canvas style="border:1px solid black;" width="800" height="400"></canvas>
  <button onclick="undo()">undo</button>
  <button onclick="redo()">redo</button>
  <script src="fabric6.js"></script>
  <script src="./fabric-history.js"></script>

  <script>
    const canvas = new fabric.Canvas(document.querySelector('canvas'), {
      isDrawingMode: true
    })
    const freeDrawingBrush = new fabric.PencilBrush(canvas);
    canvas.freeDrawingBrush = freeDrawingBrush

    document.addEventListener('keyup', ({ keyCode, ctrlKey } = event) => {
      // Check Ctrl key is pressed.
      if (!ctrlKey) {
        return
      }

      // Check pressed button is Z - Ctrl+Z.
      if (keyCode === 90) {
        canvas.undo()
      }

      // Check pressed button is Y - Ctrl+Y.
      if (keyCode === 89) {
        canvas.redo()
      }
    })
    function undo() {
      canvas.undo()
    }
    function redo() {
      canvas.redo()
    }
    </script>
</body>
</html>